<template>
	<view :style="{'--color': color, background: pageData.bgColor, padding: `${pageData.margin_tb*2}rpx ${pageData.margin*2}rpx`, '--single-h': singleH}" v-if="pageData">

		<view :style="{background: pageData.foreColor, borderRadius: `${pageData.foreRadius*2}rpx`}" :class="{'p-top10 p-bot10': pageData.foreColor}">
			<!-- 单/双行轮播 -->
			<swiper class="swiper" :current="current" @change="changeSwiper" v-if="[1, 2].includes(pageData.display) && groups.length > 1">
				<swiper-item v-for="(item,index) in groups" :key="index">
					<view :id="`single${index}`" class="d-flex f-wrap">
						<view class="w-20 text-center" :class="{'m-top20': subIndex > 4}" v-for="(subItem,subIndex) in item" :key="subIndex" @click="$banerGo(subItem)">
							<image :src="$imgUrls(subItem.img)" mode="aspectFill" :class="{'shadow': pageData.shadow == 1}" :style="[{borderRadius: pageData.radius + '%'}, picSize]"></image>
							<view class="m-top10" :style="{'font-size': (pageData.fontSize||24)+'rpx','font-weight': pageData.fontWeight||300}">{{ subItem.title }}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<!-- 自然排列 -->
			<view class="d-flex f-wrap" v-else>
				<view class="text-center" :class="[pageData.display == 1 ? 'flex-1' : 'w-20', {'m-top20': subIndex > 4}]" v-for="(subItem,subIndex) in pageData.list" :key="subIndex" 
					@click="$banerGo(subItem)">
					<image :src="$imgUrls(subItem.img)" mode="aspectFill" :class="{'shadow': pageData.shadow == 1}" :style="[{borderRadius: pageData.radius + '%'}, picSize]"></image>
					<view class="m-top10" :style="{'font-size': (pageData.fontSize||24)+'rpx','font-weight': pageData.fontWeight||300}">{{ subItem.title }}</view>
				</view>
			</view>

			<view class="flexac m-top20" v-if="groups.length > 1">
				<view class="dot" :class="{'active': current == index}" v-for="(item,index) in groups" :key="index" @click="current = index"></view>
			</view>
		</view>	
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'tabItem',
		props: ['pageData'],
		data() {
			return {
				groups: [],
				current: 0,
				singleH: '142rpx'
			}		
		},
		created() {
			let groupSize
			if(this.pageData.display == 1) groupSize = 5
			if(this.pageData.display == 2) groupSize = 10
			
			if(!groupSize) return
			for (let i = 0; i < this.pageData.list.length; i += groupSize) {
				let group = this.pageData.list.slice(i, i + groupSize)
				this.groups.push(group)
			}
			
			if(this.groups.length < 2) return
			this.$nextTick(()=>{
				this.$getViewInfo('#single0').then(res=>{
					this.singleH = res.height + 'px'
				})
			})
			
		},
		methods: {
			changeSwiper(e){
				this.current = e.detail.current
			}
		},
		computed: {
			...mapState(['color']),
			picSize() { // 图片尺寸
				if(this.pageData.display > 1) return { width: '100rpx', height: '100rpx' }
				switch (this.pageData.size) {
					case 1:
						return { width: '150rpx', height: '150rpx' }
					case 2:
						return { width: '200rpx', height: '200rpx' }
					default:
						return { width: '100rpx', height: '100rpx' }
					
				}
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: var(--single-h);
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		background: #ABA7A7;
		border-radius: 50%;
		margin: 0 6rpx;
		&.active {
			width: 40rpx;
			background: var(--color);
			border-radius: 12rpx;
		}
	}

	.shadow {
		box-shadow: 0 2px 4px rgba(0,0,0,.06);
	}
	
</style>